<!--分享卡包组件-->
<template>
  <div class="fxkb">
    <div class="fxkb-1">
      <p class="fxkb-2">余额<span class="fxkb-3">0</span>元</p>
      <div class="fxkb-4">
        <img src="3.png" alt="" class="fxkb-5">
        <p class="fxkb-6">兑换福利</p>
      </div>
      <p class="fxkb-7">兑话费,全免应用内广告</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},  
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.fxkb {
  font-size: 0.16rem;
}
.fxkb-1{
  width: 3.29rem;
  height: 1.73rem;
  margin: 0 auto;
  margin-top: 0.1rem;
  background-color: #fd5b50;
  border-radius: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fxkb-2 {
  font-size: 0.35rem;
  margin-top: 0.2rem;
  color: #fcffff;
}
.fxkb-3 {
  font-size: 0.46rem;
}
.fxkb-4 {
  width: 2.22rem;
  height: 0.51rem;
  background-color: #fddee3;
  font-size: 0.32rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.12rem;
  color: #ca4732;
}
.fxkb-5 {
  width: 0.4rem;
  margin-right: 0.1rem;
}
.fxkb-7 {
  margin-bottom: 0.2rem;
  font-size: 0.20rem;
  color: #ffffff;
}
</style>